// 创建路由器, 并暴露出去

// 1. 引入createRouter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 引入路由组件
import Home from '@/pages/home.vue'
import News from '@/pages/news.vue'
import About from '@/pages/about.vue'
import Detail from '@/pages/detail.vue'
// 2. 创建路由器
const router = createRouter({
  history: createWebHistory(), // 路由器工作模式
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      name: 'zhuye',
      path: '/home',
      component: Home 
    },
    {
      name: 'xinwen',
      path: '/news',
      component: News,
      children: [
        // {
        //   name: 'xiang',
        //   path: 'detail',
        //   component: Detail
        // }

        // params写法
        // path后面参数加问号 表示该数据 可传可不传
        // {
        //   name: 'xiang',
        //   path: 'detail/:id/:title/:content?',
        //   component: Detail
        // }

        // props写法
        // 加了props:true
        // 相当于 把path路劲的参数 以属性的方式加在 子组件实例 
        // <Detail id='xx' title='xx' content='xx'/>
        
        {
          name: 'xiang',
          path: 'detail/:id/:title/:content?',
          component: Detail,
          // 第一种写法: 将路由收到的所有params参数作为props传给路由组件
          props: true

          // 第二种写法: 函数写法 可以自己决定将什么作为props给路由组件 一般query参数这么写 params直接pros:true
          // props (route) {
          //   console.log('~~~~',route)
          //   // return {
          //   //   x:100,
          //   //   y:200,
          //   //   z:300
          //   // }
          //   return route.query
          // }

          // 第三种写法: 对象写法 可以自己决定将什么作为props给路由组件
          // props: {
          //     return {
          //     x:100,
          //     y:200,
          //     z:300
          //   }
          // }
        },
      ]
    },
    {
      name: 'guanyu',
      path: '/about',
      component: About
    }
  ]
})

// 暴露出去
export default router